<template>
<div>
    <div class="m-l-20"  v-if="graphShow">
        <span class="m-l-10" v-for="(item, index) in elementColumns" :key="index">{{item.title}}</span>
    </div>
    <div class="m-l-20"  v-else>
        分析条件: <span class="m-l-10" v-for="(item, index) in elementColumns" :key="index">{{item.title}}</span>
    </div>
    <div class="m-t-15">
        <Table :columns="elementColumns" :data="elementDatas"></Table>
        <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum"
                @on-change="sizeChange"	 @on-page-size-change="currentChange" size="small" show-elevator show-sizer></Page>
    </div>
</div>
</template>

<script>

import getData from 'getData'

export default {
    props: {
        elementGraphId: {
            type: String,
        },
        graphShow:false,
    },

    data(){
        return {
            dataList:[],
            elementColumns:[],
            elementDatas:[],
            page:{
                pageSize:10,
                pageNum:1,
            },
        }
    },
     computed:{
        graphId(){
            let value = "";
            if(this.elementGraphId.includes("_")){
                value = this.elementGraphId.split("_")[0];
            }else{
                value = this.elementGraphId;
            }
            return value;
        },
    },
    methods:{
        init(){
            var _this = this;
            getData.get('queryByGraphId',{},this.graphId).then((res) => {
                if (res.status == 200 && res.data.code == '000') {
                    // var catalogType = res.data.data.classficationId;
                    var catalogType = '1';
                    getData.get('getKpiByType',{}, catalogType).then((res) => {
                        if (res.status != 1 ) {
                            var datas = res.data.data;
                            //获取头信息
                            var columns = datas[0];
                            for(var i = 0; i < columns.length; i++){
                                let elementColumn = {
                                    title: datas[0][i],
                                    align: "center",
                                    key: datas[0][i],
                                }
                                _this.elementColumns.push(elementColumn);
                            }
                            for(var i = 1; i < datas.length; i++){
                                var result = {}
                                for(var j = 0; j < datas[i].length; j++){
                                    result[columns[j]]=datas[i][j];
                                }
                                _this.dataList.push(result);
                            }
                            _this.pages();
                        } else {
                            _this.$Message.error("查询元件数据失败!");
                        }
                    });
                }else{
                    _this.$Message.error("查询面板信息失败!");
                }
            });
        },
        pages(){
            var dataPage = [];
            this.page.total = this.dataList.length;
            var begin = this.page.pageSize * (this.page.pageNum - 1);
            var end = this.page.pageSize * this.page.pageNum;
            if(this.page.total >= end){
                for(var i = begin; i < end; i++){
                    dataPage.push(this.dataList[i])
                }
                this.elementDatas = dataPage;
            }else{
                if(this.page.total < end){
                    for(var i = begin; i < this.page.total; i++){
                        dataPage.push(this.dataList[i])
                    }
                }else{
                    for(var i = 0; i < this.dataList.length; i++){
                        dataPage.push(this.dataList[i])
                    }
                }
                this.elementDatas = dataPage;
            }
        },
        //页码 每页显示条数改变请求分页查询
        sizeChange(current) {
            this.page.pageNum = current;
            this.pages();
        },
        currentChange(size) {
            this.page.pageSize = size;
            this.pages();
        },
    },
    mounted(){
        this.init();

    }
}
</script>
